<template>
  <div
    id="asthmaQuestionnaireForm-CACT"
    class="asthmaQuestionnaireForm-CACT-container"
  >
    <div style="text-align: right; color: #606266">{{ title }}</div>
    <el-alert
      title="请让您的孩子独立完成1~4这些问题。"
      type="warning"
      show-icon
    ></el-alert>
    <el-form ref="formRef" :rules="rules" :model="form" label-position="top">
      <radio-form
        v-model="form.attr1"
        title="1. 今天你的哮喘怎么样 ？"
        prop="attr1"
        :disabled="disabled"
        :items="[
          { label: '0', value: '很差(0分)' },
          { label: '1', value: '差(1分)' },
          { label: '2', value: '好(2分)' },
          { label: '3', value: '很好(3分)' },
        ]"
      ></radio-form>
      <radio-form
        v-model="form.attr2"
        prop="attr2"
        :disabled="disabled"
        title="2. 当你在跑步、锻炼或运动时，哮喘是个多大的问题 ？"
        :items="[
          { label: '0', value: '这是个大问题，我不能做我想做事(0分)' },
          { label: '1', value: '这是个问题，我不喜欢它(1分)' },
          { label: '2', value: '这是个小问题，但我能应付(2分)' },
          { label: '3', value: '没问题(3分)' },
        ]"
      ></radio-form>
      <radio-form
        v-model="form.attr3"
        prop="attr3"
        :disabled="disabled"
        title="3. 你会因哮喘而咳嗽吗 ？"
        :items="[
          { label: '0', value: '会，一直都会(0分)' },
          { label: '1', value: '会，大部分时间会(1分)' },
          { label: '2', value: '会，有些时间会(2分)' },
          { label: '3', value: '从来不会(3分)' },
        ]"
      ></radio-form>
      <radio-form
        v-model="form.attr4"
        prop="attr4"
        :disabled="disabled"
        title="4. 你会因为哮喘而在夜里醒来吗 ？"
        :items="[
          { label: '0', value: '会，一直都会(0分)' },
          { label: '1', value: '会，大部分时间会(1分)' },
          { label: '2', value: '会，有些时间会(2分)' },
          { label: '3', value: '从来不会(3分)' },
        ]"
      ></radio-form>
      <el-alert
        style="margin: 12px 0px"
        title="请您自己回答5~7这些问题，不要受您孩子的答案影响哦。"
        type="warning"
        show-icon
      ></el-alert>
      <radio-form
        v-model="form.attr5"
        prop="attr5"
        :disabled="disabled"
        title="5. 在过去的4周里，您的孩子有多少天有日间哮喘症状 ？"
        :items="[
          { label: '5', value: '没有(5分)' },
          { label: '4', value: '1-3天(4分)' },
          { label: '3', value: '4-10天(3分)' },
          { label: '2', value: '11-18天(2分)' },
          { label: '1', value: '19-24天(1分)' },
          { label: '0', value: '每天(0分)' },
        ]"
      ></radio-form>
      <radio-form
        v-model="form.attr6"
        prop="attr6"
        :disabled="disabled"
        title="6. 在过去的4周里，您的孩子有多少天，因为哮喘在白天出现喘息声 ？"
        :items="[
          { label: '5', value: '没有(5分)' },
          { label: '4', value: '1-3天(4分)' },
          { label: '3', value: '4-10天(3分)' },
          { label: '2', value: '11-18天(2分)' },
          { label: '1', value: '19-24天(1分)' },
          { label: '0', value: '每天(0分)' },
        ]"
      ></radio-form>
      <radio-form
        v-model="form.attr7"
        prop="attr7"
        :disabled="disabled"
        title="7. 在过去的4周里，您的孩子有多少天因为哮喘而在夜里醒来 ？"
        :items="[
          { label: '5', value: '没有(5分)' },
          { label: '4', value: '1-3天(4分)' },
          { label: '3', value: '4-10天(3分)' },
          { label: '2', value: '11-18天(2分)' },
          { label: '1', value: '19-24天(1分)' },
          { label: '0', value: '每天(0分)' },
        ]"
      ></radio-form>
    </el-form>
    <div class="grade-footer">
      <span>
        总分（CACT）
        <el-tag :type="gradeType">{{ grade }}</el-tag>
        分
      </span>
      <el-tag type="danger">≤19未控制</el-tag>
      <el-tag type="warning">≥20分，≤24分部分控制</el-tag>
      <el-tag type="success">≥25分得到控制</el-tag>
    </div>
    <div class="footer" v-if="!disabled">
      <!-- <el-button v-print="printObj">打印筛查表</el-button> -->
      <!-- <el-button type="primary" @click="onSubmit(form)">保存</el-button> -->
      <debouncebtn
        class="footer-button"
        type="primary"
        @debounce="onSubmit(form)"
      >
        保存
      </debouncebtn>
    </div>
  </div>
</template>
<script>
  import radioForm from '@/components/RadioForm'
  import { computed, onBeforeMount, reactive, ref } from 'vue'
  import { queryInfo, save } from '@/api/modules/reception.js'
  import { ElMessage } from 'element-plus'
  import debouncebtn from '@/components/DebounceBtn'
  export default {
    name: 'asthmaQuestionnaireForm-CACT',
    components: { radioForm, debouncebtn },
    props: { id: Number, pid: Number },
    emits: ['success'],
    data() {
      return {
        title: 'CACT评估量表(5岁＜x≤12岁)',
        printObj: {
          id: 'asthmaAndAllergicForm-CACT',
          preview: false,
          previewTitle: '点击下方按钮进行打印',
          popTitle: '儿童哮喘与过敏性疾病筛查表',
          // extraCss: require('@/styles/asthmaAndAllergicForm.css'),
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        },
      }
    },
    setup(props, context) {
      let day = ref(null)
      let label = ref(label)
      let checkLable = ref([])
      const print = function () {}
      // 表单相关
      const form = reactive({
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        attr5: null,
        attr6: null,
        attr7: null,
      })
      const formRef = ref(null)
      const rules = {
        attr1: [{ required: true, message: '请选择', trigger: 'change' }],
        attr2: [{ required: true, message: '请选择', trigger: 'change' }],
        attr3: [{ required: true, message: '请选择', trigger: 'change' }],
        attr4: [{ required: true, message: '请选择', trigger: 'change' }],
        attr5: [{ required: true, message: '请选择', trigger: 'change' }],
        attr6: [{ required: true, message: '请选择', trigger: 'change' }],
        attr7: [{ required: true, message: '请选择', trigger: 'change' }],
        // attr8: [{ required: true, message: '请选择', trigger: 'change' }],
        // attr9: [{ required: true, message: '请选择', trigger: 'change' }],
      }
      const onSubmit = function (form) {
        formRef.value.validate((valid) => {
          if (valid) {
            form['patientId'] = props.pid
            form['screeningType'] = 0
            form['childType'] = 'C-ACT'
            save(form).then((res) => {
              ElMessage.success(res.message)
              context.emit('success')
            })
          } else {
            ElMessage.warning('请填写完毕')
          }
        })
      }

      // 初始化相关
      let disabled = ref(false)
      onBeforeMount(() => {
        if (props.id) {
          // 是查看
          disabled.value = true
          loadData({ id: props.id })
        }
      })
      const loadData = async function (params) {
        const res = await queryInfo(params)
        Object.keys(res.data).forEach((item) => {
          if (form[item] !== undefined) {
            form[item] = res.data[item] + ''
          }
        })
      }
      const gradeType = computed(() => {
        if (grade.value >= 24) {
          return 'success'
        } else if (grade.value <= 20) {
          return 'danger'
        } else {
          return 'warning'
        }
      })
      let grade = computed(() => {
        let tmp = 0
        Object.keys(form).forEach((item) => {
          // 等于0或null
          if (form[item]) tmp += parseInt(form[item])
        })
        return isNaN(tmp) ? '暂无' : tmp
      })
      return {
        day,
        label,
        checkLable,
        print,
        grade,
        gradeType,
        form,
        onSubmit,
        disabled,
        rules,
        formRef,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .asthmaQuestionnaireForm-CACT-container {
    padding: 22px;
    .seciton-header {
      margin-top: 22px;
      height: 44px;
    }
    .input {
      display: inline-block;
      width: 50px;
      :deep(.el-input__inner) {
        border-radius: 0;
        border: 0;
        padding-left: 0;
        padding-right: 0;
        box-shadow: none !important;
        border-bottom: 1px solid #d9d9d9;
        vertical-align: middle;
        height: 30px;
        font-size: 17px;
        text-align: center;
      }
    }
    .grade-footer {
      margin-top: 22px;
      .el-tag:not(:first-child) {
        margin-left: 12px;
      }
    }
    .footer {
      margin-top: 5px;
      display: flex;
      justify-content: flex-end;
    }
  }
  //一定全局定义样式
  @media print {
    //打印的样式
    #frames {
      // width: 100%;
      // height: calc(100vh - 220px);
    }
  }
</style>
